<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>首页</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui2/aui.css" />
	<style>
	    body {
	        min-height: 100%;
	    }
	    .item { padding-left: 0 !important;}
	    .swiper-container{
	       width:100%;
	       height:200px;
	    }
	    .aui-list .aui-list-item{
	       border:none;
	    }
	    .aui-list{
	       border:none;
	    }
	    .smaller{
            font-size:0.5rem;
        }
        .aui-info{
            padding:0;
        }
        .description{
            display: -webkit-box !important;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        .new-item{
            border-bottom: 1px solid #ddd !important;
        }
	</style>
</head>

<body>
    <div class="swiper-container">
    </div>
    <div class="aui-card-list">
        <ul class="aui-list aui-list-in">
            <li class="aui-list-item" tapmode onclick="openMore(1);">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-star"></i>
                </div>
                <div class="aui-list-item-inner aui-list-item-arrow">
                    <div class="aui-list-item-title">热门推荐</div>
                    <div class="aui-list-item-right">
                        更多
                    </div>
                </div>
            </li>
        </ul>
        <div class="aui-card-list-content-padded aui-border-b aui-border-t">
            <div class="aui-row aui-row-padded" id="hot_list">
            </div>
        </div>
        <ul class="aui-list aui-list-in">
            <li class="aui-list-item" tapmode onclick="openMore(2);">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-star"></i>
                </div>
                <div class="aui-list-item-inner aui-list-item-arrow">
                    <div class="aui-list-item-title">最新课程</div>
                    <div class="aui-list-item-right">
                        更多
                    </div>
                </div>
            </li>
        </ul>
        <div class="aui-card-list-content-padded aui-border-b aui-border-t">
            <div class="aui-row aui-row-padded" >
                <ul class="aui-list aui-media-list" id="new_list">
                </ul>
            </div>
        </div>
    </div>
    <script id="hot_temp" type="text/x-dot-template">
        {{ for(var i=0; i< it.data.length; i++) { }}
            {{? it.data[i].type==2}}
            <div class="aui-col-xs-6">
                <div tapmode onclick="openHot({{=i}})">
                    <img src={{=it.data[i].cover}} onerror="this.src='../../image/main/c1.jpg'" />
                    <div class="aui-info" style="padding-top:0">
                        <span>{{=it.data[i].title}}</span><span>{{=it.data[i].teacher}}</span>
                    </div>
                    <div class="aui-info smaller" style="padding-top:0">
                        <span>{{=it.data[i].start_time?it.data[i].start_time.substring(0,16):""}}</span><span>{{=it.data[i].status==0?"即将直播":"正在直播"}}</span>
                    </div>
                </div>
            </div>
            {{??}}
            <div class="aui-col-xs-6">
                <div tapmode onclick="openHot({{=i}})">
                    <img src={{=it.data[i].cover}} onerror="this.src='../../image/main/c1.jpg'" />
                    <div class="aui-info" style="padding-top:0">
                        <span>{{=it.data[i].title}}</span>
                    </div>
                    <div class="aui-info smaller" style="padding-top:0">
                        <span>{{="教师："+it.data[i].teacher}}</span><span>{{=it.data[i].start_time?it.data[i].start_time.substring(0,10):""}}</span>
                    </div>
                </div>
            </div>
            {{?}}
        {{ } }}
    </script>
    <script id="new_temp" type="text/x-dot-template">
        {{ for(var i=0; i< it.data.length; i++) { }}
        <li class="aui-list-item new-item" tapmode onclick="openNew({{=i}})">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media">
                    <img src={{=it.data[i].cover}} onerror="this.src='../../image/main/c1.jpg'" />
                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title">{{=it.data[i].title}}</div>
                    </div>
                    <div class="aui-list-item-text description">
                        {{=it.data[i].description}}
                    </div>
                </div>
            </div>
            <div class="aui-info" style="padding-top:0">
                <div class="aui-info-item">
                    <span class="aui-margin-l-5">{{="教师："+it.data[i].teacher}}</span>
                    </div>
                <div class="aui-info-item">{{=it.data[i].start_time}}</div>
            </div>
        </li>
        {{ } }}
    </script>
</body>
<script src="../../script/doT.min.js"></script>
<script data-main="../../script/main" src="../../script/require.js"></script>
<script type="text/javascript">

    var hottest=[], latest=[];
    var token;
    apiready = function() {
    	require(["api","zepto","common"],function(){
    	    $(".swiper-container").css("height",api.winWidth/16*9+"px");
    	    openSwipe();
		    loadCourses();
		});
    }

    function openSwipe(){
        var UIScrollPicture = api.require('UIScrollPicture');
        UIScrollPicture.open({
            rect: {
                x: 0,
                y: 0,
                w: api.winWidth,
                h: api.winWidth/16*9
            },
            data: {
                paths: [
                    'widget://image/main/maincover1.jpg',
                    'widget://image/main/maincover2.jpg'
                ]
            },
            styles: {
                indicator: {
                   dot:{
                     w:20,
                     h:10,
                     r:5,
                     margin:20
                  },
                    align: 'center',
                    color: '#FFFFFF',
                    activeColor: '#DA70D6'
                }
            },
            contentMode: 'scaleToFill',
            interval: 3,
            fixedOn: api.frameName,
            loop: true,
            fixed: false
        }, function(ret, err) {
        });
    }
    function loadCourses() {
        $zb.prefs.getPrefs('token',function(ret) {
            if(ret.value) {
                token = ret.value;
                $zb.requestForData({values:{token:token}}, 'main','getHottestCourses', function(ret) {
                    if (ret.status == 'OK') {
                        hottest = ret.data;
                        $("#hot_list").html(doT.template($("#hot_temp").text())(ret));
                        api.parseTapmode();
                    } else {
                        api.toast({ msg: ret.status });
                    }
                });
                $zb.requestForData({values:{token:token}}, 'main','getLatestCourses', function(ret) {
                    if (ret.status == 'OK') {
                        latest = ret.data;
                        $("#new_list").html(doT.template($("#new_temp").text())(ret));
                        api.parseTapmode();
                    } else {
                        api.toast({ msg: ret.status });
                    }
                });
            }
        });
    }
    
    function openHot(index){
       var data = {
           values:{
               token:token,
               id:hottest[index].id
           }
       }
       $zb.requestForData(data,'resources','getResourceDetail',function(ret){
            if(ret&&ret.status==="OK"){
                api.openWin({
                    name: 'rs_detail_win',
                    url: '../resource/rs_detail_win.html',
                    pageParam:{
                        data:ret.data,
                        index:parseInt(hottest[index].type),
                        info:data.values,
                        img:$zb.getRes()+hottest[index].cover
                    },
                    slidBackEnabled:false
                });
            }
       });
    }
    function openNew(index){
       var data = {
           values:{
               token:token,
               id:latest[index].id
           }
       }
       $zb.requestForData(data,'resources','getResourceDetail',function(ret){
            if(ret&&ret.status==="OK"){
                api.openWin({
                    name: 'rs_detail_win',
                    url: '../resource/rs_detail_win.html',
                    pageParam:{
                        data:ret.data,
                        index:parseInt(latest[index].type),
                        info:data.values,
                        img:$zb.getRes()+latest[index].cover
                    },
                    slidBackEnabled:false
                });
            }
       });
    }
    
    function openMore(index){
        api.openWin({
	        name: 'main_more',
	        url: './main_more.html',
	        pageParam:{
	           index:index
	        }
        });
    }
</script>
</html>
